<template>
    <div class="articles-container">
        <article v-for="item in blogList " :key="item.blogId">
            <h3 @click="toBlogDetailHandle(item.blogId)">{{ item.title }}</h3>
            <div class="info-box">
                <!--    左侧封面图    -->
                <div
                    v-if="item.pic"
                    class="left-img"
                    @click="toBlogDetailHandle(item.blogId)"
                >
                    <el-image
                        :alt="item.title"
                        :src="item.pic"
                        style="width: 100%;height: 100%;"
                    ></el-image>
                </div>
                <div class="right-info">
                    <!--    摘要      -->
                    <p>{{ item.summary }}</p>

                    <div class="right-bottom-info">
                        <!--    作者        -->
                        <div class="info author">
                            <svg-icon icon-class="author"></svg-icon>
                            <span>{{ item.author }}</span>
                        </div>
                        <!--    文章类别        -->
                        <div class="info type">
                            <svg-icon icon-class="type"></svg-icon>
                            <span @click="toArticleListHandle(item.blog_sort_id,'blogSort')">
                                {{ item.categoryName }}
                            </span>
                        </div>
                        <!--    点击量        -->
                        <div class="info visited">
                            <svg-icon icon-class="eye"></svg-icon>
                            <span>{{ item.clickCount ? item.clickCount : 0 }}</span>
                        </div>
                        <!--    点赞数量        -->
                        <div class="info liked">
                            <svg-icon icon-class="heart"></svg-icon>
                            <span>{{ item.likeCount ? item.likeCount : 0 }}</span>
                        </div>
                        <!--    创建时间        -->
                        <div class="info createTime">
                            <svg-icon icon-class="clock"></svg-icon>
                            <span>{{ item.createTime }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </article>

        <div v-if="hasMore" class="load-more-container">
            <span @click="loadMoreHandle">查看更多</span>
        </div>

        <div v-else class="no-more-container">
            <span>没有更多了</span>
        </div>


    </div>
</template>

<script>

export default {
    name: "Blogs",
    props: {
        total: {
            type: Number,
            default: () => 0,
        },
        blogList: {
            type: Array,
            default: () => [],
        },
    },
    components: {},
    data() {
        return {}
    },
    methods: {
        loadMoreHandle() {
            this.$emit('loadMoreHandle')
        },
        toBlogDetailHandle(blogId) {
            this.$emit('toBlogDetailHandle', blogId)
        },
        toArticleListHandle(uid, type) {
            this.$emit('toArticleListHandle', {uid, type})
        },


    },
    computed: {
        hasMore() {
            return this.blogList.length < this.total
        },
    },
    watch: {},
    mounted() {

    }
}
</script>

<style scoped lang="scss">
@import "Blogs";
</style>
